<template >
  <div>
      <div class="dialout_wrap" id="auto_complete_dialout">
          <el-row class="border-grid">
              <el-col>
                  <div class="dialout-input">
                      <el-input v-model.trim="phoneNum" placeholder="输入号码点击回车键发起呼叫" size="mini" @keyup.native.enter="dialoutPopup(phoneNum)" class="call-popover-auto" :class="showKeyUp? 'key-up-ppopover':''" style="width: auto"></el-input>
                      <span @click.stop="deleteKeyUp" v-show="showKeyUp" ><icon-svg icon-class="ruandianhuashanchu-xuanzhong" @click.stop="deleteKeyUp"/></span>
                      <span class="V7_iconfont V7_iconV7tubiao_bohaojianpan1 keyup-icon" :class="showKeyUp?'keyup-active':''" @click.stop="hideOrShowKeyUp"></span>
                      <span class="V7_iconfont V7_iconV7tubiao_gerenshezhi-huaji dialout-icon" @click.stop="dialoutPopup(phoneNum)"></span>
                  </div>
              </el-col>
          </el-row>
      </div>
      <ul class="history-wrap" v-show="!showKeyUp">
          <li v-for="item in callList" :key="item._id">
              <i class="V7_iconfont" :class="item.iconfont"></i>
              <span class="history-time">{{item.handleStartTime}}</span>
              <span class="history-dialout" @click.stop="dialoutPopup(item.customerNumber, false, item.extraNumber)">
                  <span class="history-name" :title="item.customerName">{{item | getCustName}}</span>
                  <span class="history-phone" :title="item.customerNumber | getHideTel(item.extraNumber)">(<span>{{item.customerNumber | getHideTel(item.extraNumber)}}</span>)</span>
              </span>
          </li>
      </ul>
      <ul class="key-up-wrap" v-show="showKeyUp">
          <li>
              <span @click.stop="keyUp('1')">1</span>
              <span @click.stop="keyUp('2')">2</span>
              <span @click.stop="keyUp('3')">3</span>
          </li>
          <li>
              <span @click.stop="keyUp('4')">4</span>
              <span @click.stop="keyUp('5')">5</span>
              <span @click.stop="keyUp('6')">6</span>
          </li>
          <li>
              <span @click.stop="keyUp('7')">7</span>
              <span @click.stop="keyUp('8')">8</span>
              <span @click.stop="keyUp('9')">9</span>
          </li>
          <li>
              <span class="disable-key">*</span>
              <span @click.stop="keyUp('0')">0</span>
              <span class="disable-key">#</span>
          </li>
      </ul>
      <el-dialog
              :visible.sync="getRiskData.riskDialog"
              append-to-body
              modal-append-to-body
              lock-scroll
              width="30%"
              @close="cancleRiskDialout"
      >
          <span slot="title" style="font-size: 14px;color: #303753;font-weight: 600;"> <span :class="getRiskData.code === '6728'? 'el-icon-warning': 'el-icon-remove'" style="padding-right:4px;"></span>{{getRiskData.title || ''}}</span>
          <div v-if="getRiskData.type === 'CALL_TIME_SLOT'">
              <span v-text="getRiskData.code === '6728'?'管理员设置当前时间外呼警告，外呼可能存在风险，是否继续外呼？':'管理员设置当前时间禁止外呼。'" style="font-size:12px;"></span>
              <div class="risk-warn-timetext">
                  <span v-text="getRiskData.code === '6728'?'外呼警告时段：': '禁止外呼时段：'"></span>
                  <div>{{getRiskData.content || ''}}</div>
              </div>
          </div>
          <div v-else class="risk-other">{{getRiskData.content || ''}}</div>
          <span slot="footer" class="dialog-footer">
          <el-button @click="cancleRiskDialout" size="mini">关闭</el-button>
          <el-button type="primary" size="mini" v-if="getRiskData.code === '6728'" @click="continueDialout">继续外呼</el-button>
     </span>
    </el-dialog>
  </div>
</template>
<script lang="ts">
// 呼叫状态
// "IVR", "通话出现异常时的状态, 没有桥接"
// "QUEUE_ABANDON", "排队放弃，进入技能组，但是没有分配座席"
// "BRIDGE", "话务两端已经桥接上，但是没有振铃"
// "RING", "呼入时座席振铃或者外呼时客户振铃 但是没有分配座席"
// "RING_NOT_ANSWER", "振铃未接听"
// "ANSWER", "双方在正常通话"
// "DIAL_OUT_AGENT_REJECTED"  座席未接听

// 呼叫类型： incoming:呼入   diaout:外呼   webcall:双向回呼  previewDialout:预览外呼  autoDialout：自动外呼
import { Component, Vue, Prop } from 'vue-property-decorator'
import { CtiModule } from '@/store/modules/cti/index'
import { checkHideTel } from '@/utils/common'
@Component({
  name: 'CallPopover',
  filters: {
    getHideTel (customerNumber, extraNumber) {
      if (extraNumber) {
        return checkHideTel(customerNumber + '-' + extraNumber)
      }
      return checkHideTel(customerNumber)
    },
    getCustName (data) {
      if (data.customerName) { // 匹配到一个客户
        return data.customerName
      } else if (data.matchResult === '000') { // 未知客户
        return '未知客户'
      } else if (data.matchResult === '010') { // 多个客户
        return '多个客户'
      }
    }
  }
})
export default class CallPopover extends Vue {
  @Prop({ default: () => [] }) private callList!: [] // 父级传递的近5条数据
  private recommend: [] = [] // 推荐外呼的号码列表
  private showKeyUp: boolean = false // 是否展示拨号盘
  private $message: any
  private $store: any
  private phoneNum: string = '' // 电话条输入的号码

  private hideOrShowKeyUp () { // 拨号盘控制
    this.showKeyUp = !this.showKeyUp
  }

  private keyUp (value: string) { // 添加按键
    this.phoneNum = this.phoneNum + value
  }

  private deleteKeyUp () { // 删除按键
    this.phoneNum = this.phoneNum.slice(0, this.phoneNum.length - 1)
  }

  private cancleRiskDialout () { // 点击风控弹窗的关闭按钮
    CtiModule.setRiskData({ riskDialog: false })
  }

  private continueDialout () { // 风控警告之后继续外呼
    this.dialoutPopup(this.getRiskData.phoneNum || this.phoneNum, true)
    CtiModule.setRiskData({ riskDialog: false })
  }

  private dialoutPopup (phoneNum, ignoreWarning, extraNumber?) { // 外呼接口
    let phoneData: any = []
    if (phoneNum.indexOf('-') > -1) {
      phoneData = phoneNum.split('-')
    } else {
      phoneData = [phoneNum, '']
    }
    const actionData: any = { calleeNumber: phoneData[0], extraNumber: extraNumber || phoneData[1] }
    if (ignoreWarning) { // 风控警告后，继续外呼
      actionData.ignoreWarning = true
    }
    // this.phoneNum = phoneNum
    CtiModule.CtiDialoutAction(actionData).then((res: any) => {
      if (res && res.success) {
        this.phoneNum = '' // 外呼成功之后清空号码
        this.$message({ message: '外呼成功', type: 'success' })
        this.$emit('closePopover')
      }
    })
  }

  get getRiskData () { // 获取风控数据
    return this.$store.state.cti.riskData || {}
  }
}
</script>
<style lang="stylus" scoped>
.history-wrap
  margin-top 12px
  color $fc-gray3
  font-size 12px
  .V7_iconfont
    font-size 12px
    color $c-main
  .V7_iconV7tubiao_weijietong
    color $c-danger
  li
    line-height 2
  span
    display inline-block
  .history-time,.history-name,.history-phone
    margin-left 10px
  .history-name, .history-phone span
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
    max-width 7em
    vertical-align middle
  .history-phone span
    max-width 7.5em
  .history-dialout
    cursor pointer
    color $fc-gray2
.dialout-input
  box-shadow 0px 0px 8px 1px rgba(231, 233, 237, 0.83)
  border-radius 4px
  background #fff
  .keyup-icon,.dialout-icon,.svg-icon
    display inline-block
    cursor pointer
    vertical-align middle
  .keyup-icon
    margin-right 8px
  .keyup-active
   color $c-main
  .dialout-icon
    font-size 14px
    width 22px
    height 22px
    line-height 22px
    background $c-green
    border-radius 50%
    color #fff
    text-align center
  .svg-icon
    font-size 20px
    margin-right 8px
 .key-up-wrap
    padding 10px 24px
    li
      margin-top 10px
      span
        width 60px
        height 30px
        line-height 30px
        text-align center
        margin-left 23px
        display inline-block
        font-weight bold
        color $fc-gray2
        border-radius 2px
        cursor pointer
        &:hover
          background $c-main
          color #fff
        &:first-child
          margin-left 0
      span.disable-key
        cursor not-allowed
        &:hover
          background #F9FAFC
          color $fc-gray2
 .risk-warn-timetext,.risk-other
    padding 10px
    max-height 160px
    overflow auto
    font-size 12px
    line-height 1.5
 .risk-warn-timetext
   background-color rgba(245,245,245,1)
   margin-top 16px
 .el-icon-remove
   color $c-danger
   font-size 16px
 .el-icon-warning
    color $c-warn
    font-size 16px
</style>
<style lang="stylus">
.call-popover-auto
  .el-input__inner
    width 218px
    height 32px !important
    border 0
.key-up-ppopover
  .el-input__inner
    width 190px
.call-popover-wrap
    background #F9FAFC
    min-width 300px
.el-popper[x-placement^="bottom"] .popper__arrow::after
   border-bottom-color #F9FAFC
</style>
